import { useCallback, useRef, useState } from "react";
import { createEditor } from "slate";
import { Editable, RenderElementProps, Slate, withReact } from "slate-react";
import LeafRender from "./core/leaf";
import ElementRender from "./core/element";
import {withInlines} from "./plugins/hooks/with-inlines";
import Image from "./plugins/image";
import Link from './plugins/link'
import useEvent from "./plugins/hooks/useEvent";

import './index.less'

import Menu from "./core/menu";
const initialValue = [
    {
      type: 'paragraph',
      children: [{ text: 'A line of text in a paragraph.' }],
    },
    // {
    //   type: 'block-quote',
    //   children: [{ text: 'A wise quote.' }],
    // },
];

export default () => {
  const editorRef=useRef<any>();

  const [editor] = useState<any>(() => Link.plugin(useEvent(Image.hook(withInlines(withReact(createEditor()))))));
  const renderLeaf = useCallback((props: any) => <LeafRender {...props} />, []);
  const renderElement = useCallback(
    (props: RenderElementProps) => <ElementRender {...props} />,
    []
  );

  const onChange=()=>{
    editor.emit('onChange')  
  }

  return (
    <div className="email-editor" ref={editorRef}>
        <Slate initialValue={initialValue} editor={editor} onChange={onChange}>
        <Menu/>
        <Editable
          id="editable"
          style={{ minHeight: 300, border: "1px solid", padding: 5 }}
          placeholder="Enter some rich text…"
          spellCheck
          autoFocus
          renderElement={renderElement}
          renderLeaf={renderLeaf}
        />
      </Slate>
    </div>
  );
};
